<template>
  <div>
   <search></search>
    <van-grid>
      <van-grid-item v-for="item in catitemsData" :icon="item.image_src" :text="item.name" />
    </van-grid>
    <van-grid>
      <van-grid-item v-for="item in catitemsData" :icon="item.image_src" :text="item.name" />
    </van-grid>
    <div class="menu">
      <div>
        <dl style="width: 200px; height: 330px;border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px;height: 330px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px; height: 340px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px;height: 330px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px;height: 330px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px;height: 330px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px;height: 330px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px;height: 330px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px; height: 330px;border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px;height: 330px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px;height: 350px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px;height: 330px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>
      <div>
        <dl style="width: 200px; border: 1px solid #000;border-radius: 10px;">
          <dd>
            <img style="width:100% ;height: 250px;" src="./2.png" alt="">

          </dd>
          <dt>
            <span style="color:skyblue;">浏览上千</span>
            <p>九成新游戏电脑便宜卖，品<br>牌型号是戴尔2070s</p>
          </dt>
        </dl>
      </div>


    </div>
  </div>
</template>

<script setup>
import { catitemsApi } from '@/api/api';
import { ref } from 'vue';
import search from '@/components/search.vue';
let catitemsData = ref([])
catitemsApi().then(res => {
  console.log(res);
  catitemsData.value = res.data.message
})
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.menu {
  column-count: 2;
  column-gap: 20px;
  width: 500px;

  div {
    display: inline-block;
  }

  div dl {
    height: 400px;
    margin: 3px;


  }
}
</style>